<!DOCTYPE html>
<html>
<head>
	<title>Shuffle</title>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.10.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>

  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

  <script type="text/javascript">
    $(function () {
      f = $('.fotorama').data('fotorama');
    })
  </script>
</head>

<body>

<p>Shuffle:<p>
<pre style="margin-top: -1em; margin-left: 1em;"><code>&lt;div class="fotorama"
     <mark>data-shuffle="true"</mark>></code></pre>

<script type="text/javascript">
  $(function () {
    var $fotorama = $('#shuffle-fotorama'),
				fotorama = $fotorama.data('fotorama');

    $('#shuffle').on('click', fotorama.shuffle);
  });
</script>

<p style="margin-bottom: .5em;"><button id="shuffle"><i class="icon-random"></i> Shuffle again</button></p>

<!-- Fotorama -->
<div class="fotorama"
     id="shuffle-fotorama"
     data-shuffle="true"
     data-width="700"
     data-ratio="3/2"
     data-max-width="100%"
     data-thumb-height="48"
     data-nav="thumbs">
	<a href="i/nyc/guy-in-car.jpg"><img src="i/nyc/thumbs/guy-in-car.jpg" width="500" height="335"></a>
	<a href="i/nyc/acapella.jpg"><img src="i/nyc/thumbs/acapella.jpg" width="550" height="391"></a>
	<a href="i/nyc/crazyjohn.jpg"><img src="i/nyc/thumbs/crazyjohn.jpg" width="450" height="591"></a>
	<a href="i/nyc/dudeintheground.jpg"><img src="i/nyc/thumbs/dudeintheground.jpg" width="550" height="342"></a>
	<a href="i/nyc/dudes.jpg"><img src="i/nyc/thumbs/dudes.jpg" width="550" height="341"></a>
	<a href="i/nyc/explanation.jpg"><img src="i/nyc/thumbs/explanation.jpg" width="500" height="356"></a>
	<a href="i/nyc/eyes.jpg"><img src="i/nyc/thumbs/eyes.jpg" width="500" height="354"></a>
	<a href="i/nyc/facing-wind.jpg"><img src="i/nyc/thumbs/facing-wind.jpg" width="500" height="383"></a>
	<a href="i/nyc/father-son-looking.jpg"><img src="i/nyc/thumbs/father-son-looking.jpg" width="500" height="491"></a>
	<a href="i/nyc/flipoff.jpg"><img src="i/nyc/thumbs/flipoff.jpg" width="450" height="609"></a>
	<a href="i/nyc/freakout.jpg"><img src="i/nyc/thumbs/freakout.jpg" width="443" height="525"></a>
	<a href="i/nyc/guy-in-park.jpg"><img src="i/nyc/thumbs/guy-in-park.jpg" width="500" height="630"></a>
	<a href="i/nyc/homeless-sleeping.jpg"><img src="i/nyc/thumbs/homeless-sleeping.jpg" width="350" height="525"></a>
	<a href="i/nyc/italianguy.jpg"><img src="i/nyc/thumbs/italianguy.jpg" width="450" height="631"></a>
	<a href="i/nyc/KIOSK.jpg"><img src="i/nyc/thumbs/KIOSK.jpg" width="550" height="367"></a>
	<a href="i/nyc/ladies-riding.jpg"><img src="i/nyc/thumbs/ladies-riding.jpg" width="600" height="340"></a>
	<a href="i/nyc/lift-dude.jpg"><img src="i/nyc/thumbs/lift-dude.jpg" width="500" height="333"></a>
	<a href="i/nyc/severedhead-lo.jpg"><img src="i/nyc/thumbs/severedhead-lo.jpg" width="550" height="455"></a>
	<a href="i/nyc/smoking.jpg"><img src="i/nyc/thumbs/smoking.jpg" width="500" height="394"></a>
	<a href="i/nyc/streetlook.jpg"><img src="i/nyc/thumbs/streetlook.jpg" width="500" height="333"></a>
	<a href="i/nyc/two-umbrellas.jpg"><img src="i/nyc/thumbs/two-umbrellas.jpg" width="500" height="374"></a>
	<a href="i/nyc/woman-reading.jpg"><img src="i/nyc/thumbs/woman-reading.jpg" width="500" height="398"></a>
</div>

<!-- © -->
<p>Photos <a href="http://alexeilebedev.com/">by Alexei Lebedev</a></p>
</body>
</html>